<template>
  <t-dialog v-model:visible="visible" attach="#app" :header="dialogType === 'add' ? '添加教师' : '修改教师'" :confirm-btn="{
        content: dialogType === 'add' ? '添加' : '修改', loading: loading }" @confirm="submit" @close="closeDialog">
    <template #body>
      <div>
        <t-form ref="ruleForm" :data="data" :rules="formRules" :label-width="60">
          <t-form-item label="姓名" name="username">
            <t-input readonly v-model="data.username" />
          </t-form-item>
          <t-form-item label="班级" name="class_id">
            <t-select v-model="data.class_id" class="demo-select-base">
              <t-option v-for="(item, index) in classOptions" :key="index" :value="item.value" :label="item.label">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="科目" name="subject">
            <t-input v-model="data.subject" />
          </t-form-item>
        </t-form>
      </div>
    </template>
  </t-dialog>
</template>
<script lang="ts" setup>
import {defineEmits, onMounted, ref} from "vue";
import {queryClass} from "../api/Class";
import {addTeacher, updateTeacher} from "../api/Teacher";
import {MessagePlugin} from "tdesign-vue-next";
// 父组件方法
const emit = defineEmits(['callback']);
// 弹框显示与否
const visible = ref<boolean>(false);
// 弹框当前状态
const dialogType = ref<string>('');
// 按钮加载状态
const loading = ref<boolean>(false);
// 表单数据
interface dataType {
  id: number | string;
  user_id: number | string;
  class_id: number | string;
  username: string;
  subject: string;
}
const data = ref<dataType>({
  id: '',
  user_id: '',
  class_id: '',
  username: '',
  subject: '',
});
interface classOptionsType {
  label: string;
  value: number;
}
const classOptions = ref<Array<classOptionsType>>([]);
// 表单校验规则
const formRules = ref({
  username: [{ required: true, message: '请输入用户名' }],
  class_id: [{ required: true, message: '请选择班级' }],
  subject: [
    { required: true, message: '请输入科目' },
    { max: 20, message: '科目不允许超过20个字符' },
  ]
});
interface TeacherType{
  user_id: number;
  username: string;
  id: number;
  class_id: number;
  subject: string;
}
// 打开弹框方法
function open(options:TeacherType, type:string):void {
  visible.value = true;
  dialogType.value = type;
  if (type === 'add') {
    data.value.user_id = options.user_id;
    data.value.username = options.username;
  } else if(type === 'update') {
    data.value.id = options.id;
    data.value.user_id = options.user_id;
    data.value.class_id = options.class_id;
    data.value.username = options.username;
    data.value.subject = options.subject;
  }
}
// 表单属性
const ruleForm = ref();
// 提交按钮
const submit = async ():Promise<void> => {
  const validate = await ruleForm.value.validate();
  if(typeof validate === "boolean"){
    if (dialogType.value === 'add') {
      loading.value = true;
      const addData = {
        user_id: data.value.user_id,
        class_id: data.value.class_id,
        subject: data.value.subject,
      };
      const result = await addTeacher(addData);
      loading.value = false;
      if(result){
        MessagePlugin.success(result.message);
        visible.value = false;
        ruleForm.value.reset();
        emit('callback');
      }
    }
    if (dialogType.value === 'update') {
      loading.value = true;
      const updateData = {
        id: data.value.id,
        user_id: data.value.user_id,
        class_id: data.value.class_id,
        subject: data.value.subject,
      };
      const result = await updateTeacher(updateData);
      loading.value = false;
      if(result){
        MessagePlugin.success(result.message);
        visible.value = false;
        ruleForm.value.reset();
        emit('callback');
      }
    }
  }
}
// 请求班级列表API
const queryClassType = async ():Promise<void> => {
  const classTypes = await queryClass();
  interface dataType {
    classname: string;
    id: number;
    create_time: string;
    update_time: string;
  }
  if(classTypes) {
    classTypes.data.forEach((item:dataType, i) => {
      classOptions.value.push({
        label: item.classname,
        value: item.id
      })
    });
  }
}
// 关闭弹框事件
const closeDialog = ():void => {
  ruleForm.value.reset();
}
onMounted(()=>{
  queryClassType();
})
defineExpose({open})
</script>
<style lang="less"></style>
